<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <h1>操作class属性</h1>
    <p>class属性的操作，推荐使用classList进行操作</p>
    <p>clasList提供了add()，remove()，toggle()方法用于添加、删除、切换class的值。</p>
    <div id="div1">我是div1</div>
    <button onclick="addClass('red')">添加红色</button>
    <button onclick="addClass('blue')">添加蓝色</button>
    <button onclick="removeClass('red')">删除红色</button>
    <button onclick="removeClass('blue')">删除蓝色</button>
    <button onclick="toggleClass('red')">切换红色</button>
    <button onclick="toggleClass('blue')">切换蓝色</button>
    <script>
        let div = document.querySelector("#div1");
        let classList = div.classList;

        function addClass(str) {
            classList.add(str);
        }

        function removeClass(str) {
            classList.remove(str);
        }

        function toggleClass(str) {
            classList.toggle(str);
        }
    </script>
</body>
</html>